import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
//引入css
import "./home.css"

// 引入图标
import { Icon } from 'antd-mobile';

// 引入仓库actions
import { actions, getBanner, getGetNew,getGroupon,getCountdown,getSeckill,getShowGoods,getFlagGoods } from "../../store/modules/home";

// 引入木偶组件
import GetNew from "./components/GetNew.jsx";
import Groupon from "./components/Groupon.jsx";
import Seckill from "./components/Seckill.jsx";
import Indexgoods from "./components/Indexgoods.jsx";


class Home extends Component {
    componentDidMount() {
        let { home: { reqBanner, getGetNew,reqGroupon,reqCountdown,reqSeckill,reqIndexGoods} } = this.props
        reqBanner()
        getGetNew()
        reqGroupon()
        reqCountdown()
        reqSeckill()
        reqIndexGoods()
    }

    render() {
        let { banner, getNew,groupon,seckill,showGoods,flagGoods,home:{changeFlagGoods} } = this.props
        return (
            <div className="home">
                <header>
                    <div className="middle">
                        <Icon type="search" />
                        <input type="text" placeholder="搜索内容" />
                        <span>搜索</span>
                    </div>
                </header>
                <main>
                    <div className="banner">
                        {/* {
                            banner.map(item => (
                                <div key={item.id}>
                                    <img src={item.img} alt="" />
                                    <p>{item.title}</p>
                                </div>
                            ))
                        } */}
                    </div>
                    <GetNew getNew={getNew}></GetNew>
                    <Groupon groupon={groupon}></Groupon>
                    <Seckill seckill={seckill}></Seckill>
                    <Indexgoods showGoods={showGoods} changeFlagGoods={changeFlagGoods} flagGoods={flagGoods}></Indexgoods>
                </main>
            </div>
        );
    }
}

//导入数据
let mapStateToProps = (state) => ({
    banner: getBanner(state),
    getNew: getGetNew(state),
    groupon: getGroupon(state),
    countdown:getCountdown(state),
    seckill:getSeckill(state),
    showGoods:getShowGoods(state),
    flagGoods:getFlagGoods(state),
});

//导入所有方法
let mapDispatchToProps = (dispatch) => ({ home: bindActionCreators(actions, dispatch), });

//将数据和方法给this.props
export default connect(mapStateToProps, mapDispatchToProps)(Home);